<template>
	<view>
		<span align="center">预约时间必须是一星期以内</span>
		<u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
			<u-form-item label="会员id" prop="userInfo.name" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.name" border="none"></u--input>
			</u-form-item>
			<span>你选择的日期是：{{timeDate}}</span>
			<button @tap="time">请选择预约日期</button>
			<u-form-item label="预约类型" prop="userInfo.sex" borderBottom @click="showSex = true;" ref="item1">
				<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		
		<br><br>
		<u-button type="success">确认预约</u-button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				timeDate:'',
				mode: 'single',
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				
				},
				actions: [{
						name: '电话预约',
					},
					{
						name: '微信预约',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.timeDate= e
				this.show=false
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			time(){
				this.show=true
			}
		}
	}
</script>

<style>

</style>
